<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-13 09:20:15
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:09:00
-->
<template>
<!-- html 只能有一个根元素-->
  <div class="head">
   <div class="tongyi">
     <div class="zon"> 
       <span class="shou" @click="toHomeHandler()">首页</span>
     <span  class="one">统一门户</span>
     <span class="two">教工</span>
     <span class="three">学生</span>
     <span class="four">考生</span>
     </div>
    <div class="sou">
      <div class="kuang">English</div>
    </div>
   </div>
    <div class="taiyuan">
     <div class="zong">
        <div class="keji">
          <img width="100%" height="100%" src="../../assets/taiyuanlog.png" alt="">
        </div>
        <div class="daxue">
          <img width="100%" height="100%" src="../../assets/qq.png" alt="">
        </div>
     </div>
    </div>
    <div class="fenlei">
      <div class="category">
     <ul>
     <li @click="toListHandler(item.id)" v-for="item in categorys" :key="item.id">{{item.name}}</li>
   </ul>
   </div>
     <div class="contact"   @click="contanctHandler()">联系我们</div>
    </div>
  </div>
</template>
<script>
// 引入axios
import {get} from '../../utils/request'
export default{
  // 用来存放数据
data(){
  return{
    // 所有分类信息
   categorys:[],
  }
},
// 存放方法
methods:{
  // 查询所有分类信息
findAllCategory(){
  // 数据交互
 get('/index/category/findCategoryTree').then(res=>{
  //  console.log(res,'---------');
   if(res.status == 200){
      this.categorys = res.data
   }else{
     this.$message({
       type:'error',
      message:res.message
     })
   }
 })
},
// 跳转到联系我们页面
contanctHandler(){
    // 跳转页面
    this.$router.push({path:'/contact'})
},
// 跳转到首页去
toHomeHandler(){
  // 页面的跳转
  this.$router.push({path:'/home'})
},
// 跳转到list页面
toListHandler(id){
  this.$router.push({path:'/list',query:{categoryId:id}})
}
   },
// 生命周期钩子函数,页面加载完之后
created(){
  // 调用查询所有栏目信息的方法
this.findAllCategory()
}
}
</script>

<style scoped lang='scss'>
.head {
  box-shadow: 0 1px 5px #ccc;
  padding:.5em 0;
  height: 280px;
}
.tongyi {
  height: 45px;
  background-color: #000000;
  color: #fff;
  font-size: 14px;
  line-height: 45px;
 .zon{
  width: 300px;
  margin-left: 150px;
  float: left;
  .shou{
    margin-right: 25px;
  }
  .one{
    margin-right: 25px;
  }
  .two{
    margin-right: 25px;
  }
  .three{
    margin-right: 25px;
  }
  .four{
    margin-right: 25px;
  }
 }
 .zon:hover{
   cursor: pointer;
 }
 .sou{
   width: 300px;
   height: 45px;
   float: right;
   margin-right: 50px;
   .kuang{
     width: 80px;
     height: 45px;
     color: #fff;
     text-align: center;
     font-size: 18px;
     margin-top: 10;
   }
 }
}
.taiyuan{
  height: 194px;
  background-color: #002147;
  .zong{
    width: 1200px;
    height: 174px;
    line-height: 174px;
    margin: 0 auto;
    .keji{
    height: 100px;
    width: 440px;
    float: left;
    margin-top: 42px;
     }
  .daxue{
    height: 100px;
    width: 440px;
    float: right;
    margin-top: 42px;
  }
  }
}
.fenlei{
  height: 48px;
  background-color:#002147e3 ;
  line-height: 48px;
   .category {
    float: left;
    ul li {
      float: left;
      padding: 0 2em;
    cursor: pointer;
    color: #fff;
    }
  }
  .contact {
    float: right;
    cursor: pointer;
    color: #fff;
  }
}

</style>